<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>类组件02.html</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
    class Weather extends React.Component {
        state = {
            isHot: false
        }

        render() {
            const {isHot} = this.state
            return <h1 onClick={this.switchWeather}>今天天气{isHot ? '很热' : '凉爽'}</h1>
        }

        switchWeather = () => {
            this.setState({
                isHot: !this.state.isHot
            }, () => {
                console.log("setState OK")
            })
        }

    }

    ReactDOM.render(<Weather/>, document.getElementById('app'));
</script>
</html>
